<template>
    <div class="boot clearfix">
        <div class="container">
            <div class="logo">
                <img style="width: 100%;height: 100%;" src="~@/assets/img/logo.png" class="vcenter" alt="">
            </div>
            <p class="text1">欢迎登录方信培训系统！</p>

            <ul class="login_input1 clearfix">
                <li>
                    <small>
                        <input type="text" v-model="dataForm.email" placeholder="请输入邮箱帐号" id="email" name="email" class="a1"/>
                    </small>
                </li>
                <li>
          <span>
            <input type="text" v-model="dataForm.verifyCode" placeholder="请输入验证码" id="verifyCode" name="verifyCode"/>
          </span>
                    <em>
                        <input type="button" class="email btn-3d" @click="getVerifyCode()" :value="content">
                    </em>
                </li>
                <li class="li_1">
                    <input type="submit" @click="dataFormSubmitHandle()" value="登 录" class="login-btn" id="login"/>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
  import debounce from 'lodash/debounce'
  import { messages } from '@/i18n'

  export default {
    data () {
      return {
        i18nMessages: messages,
        dataForm: {
          email: '',
          verifyCode: ''
        },
        content: '获取验证码',
        totalTime: 60,
        canClick: true //添加canClick
      }
    },
    methods: {
      //获取验证码
      getVerifyCode () {
        if (!this.canClick) return

        //对电子邮件的验证
        var emailReg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/
        if (!emailReg.test(this.dataForm.email)) {
          return this.$message.error('请输入正确的邮箱地址')
          return false
        }
        this.content = '发送中...'
        return this.$http
          .get('/api/mail/verifyCode?email=' + this.dataForm.email)
          .then(({ data: res }) => {
            if (res.code == 0) {
              this.$message.success(res.data)
              this.canClick = false
              this.content = this.totalTime + 's后重新发送'
              let timer = window.setInterval(() => {
                this.totalTime--
                this.content = this.totalTime + 's后重新发送'
                if (this.totalTime < 0) {
                  window.clearInterval(timer)
                  this.content = '重新发送验证码'
                  this.totalTime = 60
                  this.canClick = true //这里重新开启
                }
              }, 1000)
            } else {
              this.$message.error(res.msg)
            }
          })
          .catch(() => {
            this.content = '获取验证码'
          })
      },
      // 登陆
      dataFormSubmitHandle: debounce(
        function () {
          if (!this.dataForm.email || !this.dataForm.verifyCode) {
            this.$message.error('邮箱或验证码不能为空')
          }
          this.$http
            .post('/user/login', this.dataForm, {
              headers: { 'content-type': 'application/x-www-form-urlencoded' }
            })
            .then(({ data: res }) => {
              if (res.code !== 0) {
                return this.$message.error(res.msg)
              } else {
                // console.log(res)
                sessionStorage.setItem('email', res.data.username)
                sessionStorage.setItem('token', res.data.token)

                this.$router.push({ name: 'index' })
              }
            })
            .catch(() => {
            })
        },
        1000,
        { leading: true, trailing: false }
      )
    }
  }
</script>

<style lang="scss">
    html,
    body {
        height: 100%;
    }

    .boot {
        height: 100%;
        background: #f5f5f5;
    }

    /*login*/
    .boot .logo {
        width: 220px;
        height: 80px;
        position: relative;
        margin-left: 20px;
    }

    @media (max-width: 1360px) {
        .boot .logo {
            margin-left: 20px;
        }
    }

    .boot .text1 {
        text-align: center;
        margin-top: 82px;
        color: #333333;
        font-size: 22px;
        line-height: 24px;
    }

    .boot .login_input1 {
        margin: 80px auto;
        list-style: none;
        width: 470px;
    }

    .boot .login_input1 li {
        margin: 0 auto 32px;
        display: table;
        border: 1px solid #dbdbdb;
        width: 100%;
    }

    .boot .login_input1 li input {
        width: 100%;
        font-size: 16px;
        padding: 16px 10px 16px 55px;
        font-family: "microsoft yahei";
        border: none;
        color: #666;
        position: relative;
    }

    .boot .login_input1 li .login-btn {
        width: 100%;
        font-size: 16px;
        padding: 16px 10px 16px 16px;
        font-family: "microsoft yahei";
        border: none;
        color: #666;
        position: relative;
    }

    .boot .login_input1 li small {
        display: block;
        position: relative;
    }

    .boot .login_input1 li small:before {
        content: "";
        position: absolute;
        left: 18px;
        top: 15px;
        width: 27px;
        height: 27px;
        z-index: 99;
        background: url("http://edu.71360.com/b2c/static/images/login-1.jpg") no-repeat;
    }

    .boot .login_input1 li em {
        font-style: inherit;
        float: left;
        width: 153px;
        height: 53px;
        background: #16a4f9;
        text-align: center;
        line-height: 52px;
        color: #fff;
        font-size: 20px;
        font-family: "microsoft yahei";
        border: none;
        display: block;
        padding: 0;
        border-radius: 3px;
        overflow: hidden;
    }

    .boot .login_input1 li em a {
        color: #fff;
    }

    .boot .login_input1 li em:hover {
        background: #039ae1;
    }

    .boot .login_input1 li span {
        display: block;
        float: left;
        width: 275px;
        position: relative;
    }

    .boot .login_input1 li span:before {
        content: "";
        position: absolute;
        left: 18px;
        top: 15px;
        width: 27px;
        height: 27px;
        z-index: 99;
        background: url("http://edu.71360.com/b2c/static/images/login-2.jpg") no-repeat;
    }

    .boot .login_input1 li #send {
        width: 100%;
        height: 44px;
        background: #16a4f9;
        text-align: center;
        line-height: 44px;
        color: #fff;
        font-size: 18px;
        font-family: "microsoft yahei";
        border: none;
        display: block;
        margin: 0 auto;
        padding: 0;
        border-radius: 3px;
        overflow: hidden;
    }

    .boot .login_input1 li #send:hover {
        background: #039ae1;
    }

    .boot .login_input1 .li_1 {
        border: none;
    }

    .boot .login_input1 li em .email {
        background: #16a4f9;
        line-height: 52px;
        font-size: 20px;
        padding: 0px;
        color: #fff;
        cursor: pointer;
    }

    .btn-3d {
        position: relative;
        perspective: 800px;
        transition: background 0.6s;
        transform-origin: 50% 0;
        transform-style: preserve-3d;
    }

    .btn-3d::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: red;
        border-radius: inherit;
        color: inherit;
        content: attr(data-hover); //绑定hover事件
        transform: rotateX(270deg); //css旋转270度
        transition: transform 0.6s; //过渡效果
        transform-origin: 0 0; //css旋转轴
        pointer-events: none;
        padding: inherit;
        font: inherit;
    }

</style>
